<template>
    <view>
        <view @tap="showSelectListFun">
            <slot></slot>
        </view>
        <view :class="'sele_box ' + (showSelectList ? 'active' : '')" v-if="showSelectList">
            <view class="ceng" @tap.stop.prevent="hideSelectList"></view>
            <view class="content">
                <view class="top">
                    <view class="fl">{{ title }}</view>
                    <view class="fr"></view>
                </view>
                <view class="sea_box">
                    <input class="sea_bar" placeholder="输入搜索关键词" @input="search" :value="keywords" />
                </view>
                <view class="sch_list">
                    <view class="sch_item sch_item1" @tap="navTo" v-if="false">
                        <view class="fl">{{ navTitle }}</view>
                        <view class="fr">+</view>
                    </view>
                    <block v-for="(item, index) in range" :key="index">
                        <view
                            :class="'sch_item sch_item2 ' + (beSelected == index ? 'active' : '')"
                            v-if="item.isHide != 1 ? false : true"
                            @tap="searchChange"
                            :data-index="index"
                        >
                            <view class="fl" v-if="rangeKey">{{ item[rangeKey] }}</view>
                            <view class="fl" v-if="!rangeKey">{{ item }}</view>
                            <view class="fr"><view></view></view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showSelectList: false,
            keywords: '',
            title: '',
            range: [],
            beSelected: '',
            mode: '',
            rangeKey: '',
            disabled: false,
            navTitle: '',
            navTo: '',
            disabledNavto: false
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        mode: {
            type: String
        },
        rangeKey: {
            type: String
        },
        range: {
            type: Array
        },
        disabled: {
            type: Boolean
        },
        title: {
            type: String
        },
        navTitle: {
            type: String
        },
        navTo: {
            type: String
        },
        beSelected: {
            type: String,
            default: '-1'
        },
        disabledNavto: {
            type: Boolean,
            default: false
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        search(e) {
            var keywords = e.detail.value;
            var defaultList = this.range;
            var res = this.getResult(keywords, defaultList);
            this.range= res;this.keywords= keywords;
        },

        getResult(keywords, defaultList) {
            for (var x in defaultList) {
                if (defaultList[x][this.rangeKey].indexOf(keywords) !== -1) {
                    defaultList[x]['isHide'] = 0;
                } else {
                    defaultList[x]['isHide'] = 1;
                }
            }

            return defaultList;
        },

        searchChange(e) {
            const myEventDetail = {
                value: e.currentTarget.dataset.index
            };
            const myEventOption = {};
            this.beSelected= myEventDetail.value;this.showSelectList= false;
            this.$emit(
                'searchchange',
                {
                    detail: myEventDetail
                },
                myEventOption
            );
        },

        navToFun() {
            uni.navigateTo({
                url: this.navTo
            });
        },

        showSelectListFun() {
            if (!this.disabled) {
                this.showSelectList= true;
                console.log(this.mode);
            }
        },

        hideSelectList() {
            this.showSelectList= false;
        },
    },
};
</script>
<style>
@import './search_picker.css';
</style>
